<template>
  <div class="index-box" ref="index">

        <div class="search" ref="search"></div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight"
            @selection-change="handleSelectionChange" default-expand-all stripe
            :tree-props="{children: 'children'}">

            <el-table-column prop="name" label="门店类型" ></el-table-column>
            <el-table-column prop="name" label="许可证" ></el-table-column>
            <el-table-column prop="name" label="服务费" ></el-table-column>
            <el-table-column prop="name" label="备注" ></el-table-column>
            <el-table-column prop="modify_date" label="更新时间">
            </el-table-column>
            <el-table-column prop="name" label="操作">
              <template #default="scope">
                <div class="activeBox">
                  <span @click="handleSetMoney(scope.$index, scope.row)" v-if="scope.row.parent_id">设置服务费</span>
                </div>
              </template>
            </el-table-column>
          </el-table>

          <div class="page" ref="page">
            <MyPagination
              v-show="total>0"
              :total="total"
              :page.sync="searchForm.pageNum
              :limit.sync="searchForm.pageSize"
              @pagination="dataInfo"
            />
          </div>
        </div>

    <!-- /*新增修改*/	 -->
    <el-dialog :title="dialogTitle" :close-on-click-modal="false" width="600px" v-dialogDrag :visible.sync="userFormVisible"
      @close="userFormVisible = false">
      <el-form id="userDialog" :model="user" label-position="right" :rules="rules" ref="user">
        <el-form-item label="分类名称:"  label-width="85px">
          <span>{{user.title}}</span>
        </el-form-item>
        <el-form-item label="服务费:" prop="money" label-width="85px">
          <el-input v-model="user.money" autocomplete="off"><template slot="append">%</template></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="remark" label-width="85px">
          <el-input v-model="user.remark" autocomplete="off" type="textarea" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetFormDialog('user')" size="small">重 置</el-button>
        <el-button type="primary" @click="submitUser('user')" size="small" v-loading="userLoading">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    getCallRecord
  } from '@/api/getData'
  import option from '../../common/option.js';

  export default {
    data() {
      return {
        loading: false,
        userLoading: false,
        tableHeight:0,//table 高度
        searchForm: {
          name: '',
          time: '',
          status: '',
          pageNum: 1,
          pageSize:20,
        },
        statusList: [{
          id: '1',
          name: '禁用'
        }, {
          id: '2',
          name: '启用'
        }],
        departmentChildList: [{
          id: '1',
          name: '技术中心'
        }, {
          id: '2',
          name: '财务部'
        }],
        dataList: [],
        total: 0,
        sortData: {
          prop: 'insert_date',
          order: 'descending'
        },
        multipleSelection: '',
        dialogTitle: '',
        userFormVisible: false,
        user: {
          id: '',
          title:'',
          money: '',
          remark: ''
        },
        rules: {
          money: [{
            required: true,
            message: '服务费不能为空',
            trigger: 'blur'
          }]
        }
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 45;
      })
    },
    methods: {
      async dataInfo() {
        try {
          this.loading = true;
          const result = await getCallRecord(this.searchForm);
          if (result.success == true) {
            this.total = result.total;
            this.dataList = result.data;
          } else {
            this.$message.error(result.message);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleSetMoney() {
        this.dialogTitle = '设置服务费';
        this.userFormVisible = true;
      },
      submitUser(formName) {
        /*添加用户*/
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.userLoading) return;
            this.userLoading = true;
            getCallRecord(this.user).then((result) => {
              if (result.success == true) {
                this.$message.success(result.message);
                this.userFormVisible = false;
                this.dataInfo();
              } else {
                this.$message.error(result.message);
              }
              this.userLoading = false;
            });
          }
        })
      },
      resetFormDialog(formName) {
        this.$refs[formName].resetFields();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleCurrentChange(page) {
        this.page = page;
        this.dataInfo()
      },
      handleSizeChange(val) {
        this.limit = val;
        this.dataInfo();
      },
    }
  }
</script>

<style scoped>

</style>
